<template>

  <div id="columnDiv">

    <h3>栏目管理</h3>

    <el-row>

      <el-col :span="16" id="colLeft">

        <el-button type="primary" @click="addFatherValue=true" style="margin-bottom: 10px">添加父节点</el-button>

        <el-menu

          default-active="1"

          class="el-menu-vertical-demo"

          style="background-color: #f8f8f8;width: 300px"

          v-for="items in columnList" v-bind:key="items.id">

          <el-aside id="colAside">

            <el-submenu :index="String(items.id)" v-if="items.pid==1||items.pid==0">

              <template slot="title">

                <span>{{ items.name }}</span>

              </template>

              <el-menu-item-group style="background-color: #f8f8f8"

                                  v-for="items in items.children" v-bind:key="items.id">

                <el-menu-item :index="String(items.id)" @click="findOne(items)"

                              v-if="items.children.length==0 || items.pid==1||items.pid==0">

                  {{ items.name }}

                </el-menu-item>


                <el-submenu :index="String(items.id)" v-if="items.children.length>0 && items.pid!=1&&items.pid!=0">

                  <template slot="title">

                    <span>{{ items.name }}</span>

                  </template>

                  <el-menu-item-group style="background-color: #f8f8f8"

                                      v-for="items in items.children" v-bind:key="items.id">

                    <el-menu-item :index="String(items.id)" @click="findOne(items)">{{ items.name }}</el-menu-item>

                  </el-menu-item-group>

                </el-submenu>

              </el-menu-item-group>

            </el-submenu>

          </el-aside>

        </el-menu>

      </el-col>

      <el-col :span="8" id="colRight">

        <el-button type="primary" plain @click="addSonValue=true">添加子节点</el-button>

        <el-button type="primary" plain @click="updButton">修改</el-button>

        <el-button type="primary" plain @click="del">删除</el-button>

        <el-descriptions :column="1" style="margin-top: 10px">

          <el-descriptions-item label="父节点名称">{{ column.pname }}</el-descriptions-item>

          <el-descriptions-item label="Node Chinese name">{{ column.name }}</el-descriptions-item>

          <el-descriptions-item label="节点英文名称">{{ column.ename }}</el-descriptions-item>

          <el-descriptions-item label="接口路径">{{ column.interfacePath }}</el-descriptions-item>

          <el-descriptions-item label="排序号">{{ column.order }}</el-descriptions-item>

        </el-descriptions>

      </el-col>

    </el-row>



    <el-dialog title="添加父节点" width="50%"

               :visible.sync="addFatherValue"

               :before-close="handleClose">

      <el-form ref="passwordForm" :model="addFatherColumn" label-position="left"

               label-width="120px" :rules="rules">

        <el-form-item label="节点 中文名称" prop="name">

          <el-input v-model="addFatherColumn.name"></el-input>

        </el-form-item>

        <el-form-item label="节点英文名称" prop="ename">

          <el-input v-model="addFatherColumn.ename"></el-input>

        </el-form-item>

        <el-form-item label="页面地址" prop="pagePath">

          <el-input v-model="addFatherColumn.pagePath"></el-input>

        </el-form-item>

        <el-form-item label="接口路径" prop="interfacePath">

          <el-input v-model="addFatherColumn.interfacePath"></el-input>

        </el-form-item>

        <el-form-item label="排序号" prop="order">

          <el-input v-model="addFatherColumn.order" placeholder="数字越大排序越前"></el-input>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

      <el-button @click="addFatherValue = false">取 消</el-button>

      <el-button type="primary" @click="addFather">确 定</el-button>

    </span>

    </el-dialog>

    <el-dialog title="添加子节点" width="50%"

               :visible.sync="addSonValue"

               :before-close="handleClose">

      <el-form ref="passwordForm" :model="addSonColumn" label-position="left"

               label-width="120px" :rules="rules">

        <el-form-item label="父节点名称">

          {{ column.pname }}

        </el-form-item>

        <el-form-item label="节点中文名称" prop="name">

          <el-input v-model="addSonColumn.name"></el-input>

        </el-form-item>

        <el-form-item label="节点英文名称" prop="ename">

          <el-input v-model="addSonColumn.ename"></el-input>

        </el-form-item>

        <el-form-item label="页面地址" prop="pagePath">

          <el-input v-model="addSonColumn.pagePath"></el-input>

        </el-form-item>

        <el-form-item label="接口路径" prop="interfacePath">

          <el-input v-model="addSonColumn.interfacePath"></el-input>

        </el-form-item>

        <el-form-item label="排序号" prop="order">

          <el-input v-model="addSonColumn.order" placeholder="数字越大排序越前"></el-input>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

      <el-button @click="addSonValue = false">取 消</el-button>

      <el-button type="primary" @click="addSon">确 定</el-button>

    </span>

    </el-dialog>

    <el-dialog title="编辑节点" width="50%"

               :visible.sync="updValue"

               :before-close="handleClose">

      <el-form ref="passwordForm" :model="updColumn" label-position="left"

               label-width="120px" :rules="rules">

        <el-form-item label="父节点名称" prop="pid">

          {{ updColumn.pname }}

        </el-form-item>

        <el-form-item label="节点中文名称" prop="name">

          <el-input v-model="updColumn.name"></el-input>

        </el-form-item>

        <el-form-item label="节点英文名称" prop="ename">

          <el-input v-model="updColumn.ename"></el-input>

        </el-form-item>

        <el-form-item label="页面地址" prop="pagePath">

          <el-input v-model="updColumn.pagePath"></el-input>

        </el-form-item>

        <el-form-item label="接口路径" prop="interfacePath">

          <el-input v-model="updColumn.interfacePath"></el-input>

        </el-form-item>

        <el-form-item label="排序号" prop="order">

          <el-input v-model="updColumn.order" placeholder="数字越大排序越前"></el-input>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

      <el-button @click="updValue = false">取 消</el-button>

      <el-button type="primary" @click="upd">确 定</el-button>

    </span>

    </el-dialog>

  </div>



</template>



<script>

import { listColumn, getColumn, delColumn, addColumn, updateColumn } from "@/api/column/column";



export default {

  data() {

    return {

      columnList: [],

      addFatherValue: false,

      addFatherColumn: {},

      addSonValue: false,

      addSonColumn: {},

      updValue: false,

      updColumn: {},

      rules: {

        password: [

          {required: true, message: '请输入节点中文名称', trigger: 'blur'},

          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}

        ],

        newPassword1: [

          {required: true, message: '请输入节点英文名称', trigger: 'blur'},

          {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}

        ]

      },

      active: 1,

      column: {

        pname: '',

      },

    }

  },

  created() {

    this.getColumn();

  },

  methods: {

    handleClose(done) {

      this.$confirm('确认关闭？').then(() => {

        done();

      }).catch(() => {

      })

    },

    findOne(val) {

      this.column = val;

      this.columnList.forEach(item => {

        if (item.id === val.pid) {

          this.column.pname = item.name;

        }

      })

      console.log(this.column);

    },

    addFather() {

      this.addFatherColumn.pid = 1;

      addColumn(this.addFatherColumn).then(res => {

        if (res.code == 200) {

          this.$message('添加成功')

          this.addFatherValue = false;

          this.getColumn();

        } else {

          this.$message('添加失败')

        }

      })

    },

    addSon() {

      this.addSonColumn.pid = this.column.id;

      addColumn(this.addSonColumn).then(res => {

        if (res.code == 200) {

          this.$message('添加成功')

          this.addSonValue = false;

          this.getColumn();

        } else {

          this.$message('添加失败')

        }

      })

    },

    updButton() {

      this.updValue = true;

      this.updColumn = this.column;

    },

    upd() {

      updateColumn(this.updColumn).then(res => {

        if (res.code == 200) {

          this.$message('修改成功')

          this.updValue = false;

          this.getColumn();

        } else {

          this.$message('修改失败')

        }

      })

    },

    del() {

      delColumn(this.column.id).then(res => {

        if (res.code == 200) {

          this.$message('删除成功')

          this.getColumn();

        } else {

          this.$message('删除失败')

        }

      })

    },

    getColumn() {

      listColumn().then(res => {

        this.columnList = res.rows

        console.log(this.columnList)

      })

    }

  }

}

</script>



<style>





#columnDiv {

  background-color: #ffffff;

  padding: 10px;

  height: 120%;

}



#colLeft {

  border-right: 1px solid rgb(128, 128, 128);

  padding: 10px;

}



#colAside {

  background-color: #ffffff;

  height: 100%;

  scrollbar-width: none; /* firefox */

  -ms-overflow-style: none; /* IE 10+ */

  overflow-x: hidden;

  overflow-y: auto;

}



#colRight {

  padding: 10px;

}

</style>
